<template>
  <dv-full-screen-container>
    <div class="smart-detention-system">
      <dv-border-box-11 title="xx监狱智能收押分流系统" :titleWidth="300" class="system-content">
        <div class="system-content-container">



          <!-- 主要内容区域 -->
          <div class="main-content">

            <!-- 左侧分流决策面板 -->
            <div class="left-panel">
              <div class="left-panel-content">
                <dv-border-box-2>
                  <prisoner-composition-chart></prisoner-composition-chart>
                </dv-border-box-2>
              </div>
              <!-- 床铺分布 -->
              <div class="left-panel-content">
                <dv-border-box-4>
                  <bed-distribution-chart></bed-distribution-chart>
                </dv-border-box-4>
              </div>
              
            </div>

            <!-- 中间监控面板 -->
            <div class="center-panel">
              <!-- 顶部统计面板 -->
              <div class="top-stats-panel">
                <dv-border-box-1 class="stats-container">
                  <div class="stats-grid">
                    <div class="stat-item">
                      <div class="stat-content">
                        <div class="stat-value">{{ registeredCount }}</div>
                        <div class="stat-label">在册</div>
                      </div>
                    </div>
                    <div class="stat-item">
                      <div class="stat-content">
                        <div class="stat-value">{{ detainedCount }}</div>
                        <div class="stat-label">在押</div>
                      </div>
                    </div>
                    <div class="stat-item">
                      <div class="stat-content">
                        <div class="stat-value">{{ custodyCount }}</div>
                        <div class="stat-label">收押</div>
                      </div>
                    </div>
                    <div class="stat-item">
                      <div class="stat-content">
                        <div class="stat-value">{{ diversionCount }}</div>
                        <div class="stat-label">分流</div>
                      </div>
                    </div>
                  </div>
                </dv-border-box-1>
              </div>
              <!--  中间下部监控面板 -->
              <div class="center-bottom-panel">
                <div class="center-bottom-panel-content left-content">
                    <!-- 1-11监区收押数据 -->
                    <div class="center-bottom-panel-content-item">
                      <dv-border-box-8>
                        <detention-data-cards ref="detentionDataCards" :analysisComplete="analysisCompleteTrigger"></detention-data-cards>
                      </dv-border-box-8>
                    </div>
                    <!-- 在押人数统计 -->
                    <div class="center-bottom-panel-content-item">
                      <dv-border-box-9>
                        <detention-count-chart></detention-count-chart>
                      </dv-border-box-9>
                    </div>
                </div>
                <div class="center-bottom-panel-content right-content">
                  <!-- 文件上传 -->
                  <div class="center-bottom-panel-content-item upload-content">
                    <dv-border-box-10>
                      <data-import @upload-success="handleUploadSuccess" @analysis-complete="handleAnalysisComplete"></data-import>
                    </dv-border-box-10>
                  </div>
                  <!-- 执行日志 -->
                  <div class="center-bottom-panel-content-item log-content">
                    <dv-border-box-6>
                      <execution-log></execution-log>
                    </dv-border-box-6>
                  </div>
                  <!-- 监区数据 -->
                  <div class="center-bottom-panel-content-item prison-data-content">
                    <dv-border-box-12>
                      <prison-data></prison-data>
                    </dv-border-box-12>
                  </div>
                </div>
              </div>
            </div>



          </div>
        </div>
      </dv-border-box-11>

      <!-- 浮动注销按钮 -->
      <div class="floating-logout">
        <button class="logout-btn" @click="handleLogout" title="注销">
          <!-- <i class="logout-icon">🚪</i> -->
          <span class="logout-text">注销</span>
        </button>
      </div>
    </div>
  </dv-full-screen-container>
</template>

<script>
import { Chart } from '@antv/g2'
import PrisonerCompositionChart from '../components/PrisonerCompositionChart.vue';
import BedDistributionChart from '../components/BedDistributionChart.vue';
import DetentionDataCards from '../components/DetentionDataCards.vue';
import DetentionCountChart from '../components/DetentionCountChart.vue';
import DataImport from '../components/DataImport.vue';
import ExecutionLog from '../components/ExecutionLog.vue';
import PrisonData from '../components/PrisonData.vue';
export default {
  name: 'SmartDetentionSystem',
  components: {
    PrisonerCompositionChart,
    BedDistributionChart,
    DetentionDataCards,
    DetentionCountChart,
    DataImport,
    ExecutionLog,
    PrisonData
  },
  data() {
    return {
      // 统计数据
      registeredCount: 1247,
      detainedCount: 892,
      custodyCount: 345,
      diversionCount: 156,

      // 分流决策数据
      decisionItems: [
        {
          id: '001',
          name: '张三',
          crimeType: '盗窃罪',
          recommendation: { type: 'low', text: '建议社区矫正' },
          confidence: 87
        },
        {
          id: '002',
          name: '李四',
          crimeType: '抢劫罪',
          recommendation: { type: 'high', text: '建议羁押' },
          confidence: 92
        },
        {
          id: '003',
          name: '王五',
          crimeType: '诈骗罪',
          recommendation: { type: 'medium', text: '建议取保候审' },
          confidence: 78
        }
      ],

      // 监控数据
      onlineUsers: 156,
      queueLength: 34,
      avgProcessTime: '2.3分',
      systemLoad: '67%',

      // 风险分析数据
      riskAnalysis: [
        {
          id: 1,
          level: 'high',
          levelText: '高风险',
          type: '暴力犯罪',
          count: 45,
          trend: 'up',
          trendText: '↑ 8%'
        },
        {
          id: 2,
          level: 'medium',
          levelText: '中风险',
          type: '财产犯罪',
          count: 78,
          trend: 'down',
          trendText: '↓ 12%'
        },
        {
          id: 3,
          level: 'low',
          levelText: '低风险',
          type: '轻微违法',
          count: 156,
          trend: 'stable',
          trendText: '→ 2%'
        }
      ],

      // 图表实例
      distributionChart: null,
      trendChart1: null,
      trendChart2: null,

      // 控制状态
      autoRefresh: true,
      timeRange: 'day',
      updateTimer: null,

      // 分析完成触发器
      analysisCompleteTrigger: null
    }
  },
  computed: {
    decisionStatus() {
      const pending = this.decisionItems.filter(item => item.confidence < 80).length
      if (pending > 2) return 'busy'
      if (pending > 0) return 'normal'
      return 'idle'
    },
    decisionStatusText() {
      const status = this.decisionStatus
      switch (status) {
        case 'busy': return '系统繁忙'
        case 'normal': return '运行正常'
        default: return '空闲'
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initializeCharts()
      this.startDataUpdate()
      this.initFullscreenShortcuts()
    })
  },
  beforeDestroy() {
    if (this.updateTimer) {
      clearInterval(this.updateTimer)
    }
    this.destroyCharts()
    this.removeFullscreenShortcuts()
  },
  methods: {
    // 初始化图表
    initializeCharts() {
      this.initDistributionChart()
      this.initTrendCharts()
    },

    // 初始化分流统计图表
    initDistributionChart() {
      const container = document.getElementById('distribution-chart')
      if (!container) return

      this.distributionChart = new Chart({
        container: 'distribution-chart',
        autoFit: true,
        height: 300,
        theme: 'dark'
      })

      const data = [
        { type: '社区矫正', count: 234, percentage: 28.5 },
        { type: '取保候审', count: 189, percentage: 23.0 },
        { type: '监视居住', count: 156, percentage: 19.0 },
        { type: '刑事拘留', count: 134, percentage: 16.3 },
        { type: '逮捕羁押', count: 112, percentage: 13.2 }
      ]

      this.distributionChart
        .interval()
        .data(data)
        .encode('x', 'type')
        .encode('y', 'count')
        .encode('color', '#00ffff')
        .style('fillOpacity', 0.8)
        .axis('x', { title: false })
        .axis('y', { title: false })
        .interaction('elementHighlight', true)

      this.distributionChart.render()
    },

    // 初始化趋势图表
    initTrendCharts() {
      // 趋势图表1 - 分流数量趋势
      const container1 = document.getElementById('trend-chart-1')
      if (container1) {
        this.trendChart1 = new Chart({
          container: 'trend-chart-1',
          autoFit: true,
          height: 200,
          theme: 'dark'
        })

        const trendData1 = this.generateTrendData('day')
        this.trendChart1
          .line()
          .data(trendData1)
          .encode('x', 'time')
          .encode('y', 'count')
          .encode('color', '#00ff88')
          .style('lineWidth', 2)
          .axis('x', { title: false })
          .axis('y', { title: false })

        this.trendChart1.render()
      }

      // 趋势图表2 - 系统准确率趋势
      const container2 = document.getElementById('trend-chart-2')
      if (container2) {
        this.trendChart2 = new Chart({
          container: 'trend-chart-2',
          autoFit: true,
          height: 200,
          theme: 'dark'
        })

        const trendData2 = this.generateAccuracyData('day')
        this.trendChart2
          .line()
          .data(trendData2)
          .encode('x', 'time')
          .encode('y', 'accuracy')
          .encode('color', '#ff6600')
          .style('lineWidth', 2)
          .axis('x', { title: false })
          .axis('y', { title: false })

        this.trendChart2.render()
      }
    },

    // 生成趋势数据
    generateTrendData(range) {
      const data = []
      const hours = range === 'day' ? 24 : range === 'week' ? 7 : 30
      const label = range === 'day' ? '时' : range === 'week' ? '日' : '日'

      for (let i = 0; i < hours; i++) {
        data.push({
          time: `${i}${label}`,
          count: Math.floor(Math.random() * 50) + 20
        })
      }
      return data
    },

    // 生成准确率数据
    generateAccuracyData(range) {
      const data = []
      const hours = range === 'day' ? 24 : range === 'week' ? 7 : 30
      const label = range === 'day' ? '时' : range === 'week' ? '日' : '日'

      for (let i = 0; i < hours; i++) {
        data.push({
          time: `${i}${label}`,
          accuracy: 85 + Math.random() * 15
        })
      }
      return data
    },

    // 销毁图表
    destroyCharts() {
      if (this.distributionChart) {
        this.distributionChart.destroy()
      }
      if (this.trendChart1) {
        this.trendChart1.destroy()
      }
      if (this.trendChart2) {
        this.trendChart2.destroy()
      }
    },

    // 开始数据更新
    startDataUpdate() {
      this.updateTimer = setInterval(() => {
        this.updateRealtimeData()
      }, 3000)
    },

    // 更新实时数据
    updateRealtimeData() {
      this.onlineUsers += Math.floor(Math.random() * 10) - 5
      this.onlineUsers = Math.max(100, Math.min(200, this.onlineUsers))

      this.queueLength += Math.floor(Math.random() * 6) - 3
      this.queueLength = Math.max(10, Math.min(100, this.queueLength))

      const loadValue = parseFloat(this.systemLoad)
      this.systemLoad = Math.max(20, Math.min(95, loadValue + Math.floor(Math.random() * 10) - 5)) + '%'
    },

    // 切换自动刷新
    toggleAutoRefresh() {
      this.autoRefresh = !this.autoRefresh
      if (this.autoRefresh) {
        this.startDataUpdate()
      } else {
        if (this.updateTimer) {
          clearInterval(this.updateTimer)
          this.updateTimer = null
        }
      }
    },

    // 设置时间范围
    setTimeRange(range) {
      this.timeRange = range
      this.updateTrendCharts()
    },

    // 更新趋势图表
    updateTrendCharts() {
      if (this.trendChart1) {
        const newData1 = this.generateTrendData(this.timeRange)
        this.trendChart1.changeData(newData1)
      }
      if (this.trendChart2) {
        const newData2 = this.generateAccuracyData(this.timeRange)
        this.trendChart2.changeData(newData2)
      }
    },

    // 确认决策
    confirmDecision(id) {
      console.log('确认决策:', id)
      // 这里可以调用API确认决策
      this.$message.success('决策已确认')
    },

    // 复核决策
    reviewDecision(id) {
      console.log('复核决策:', id)
      // 这里可以调用API复核决策
      this.$message.info('进入复核流程')
    },

    // 全屏快捷键
    initFullscreenShortcuts() {
      this.fullscreenKeyHandler = (event) => {
        if (event.key === 'F11') {
          event.preventDefault()
          this.toggleFullscreen()
          return
        }
        if ((event.ctrlKey || event.metaKey) && event.key === 'Enter') {
          event.preventDefault()
          this.toggleFullscreen()
          return
        }
        if (event.key === 'Escape' && this.isFullscreen()) {
          this.exitFullscreen()
          return
        }
      }
      document.addEventListener('keydown', this.fullscreenKeyHandler)
    },

    removeFullscreenShortcuts() {
      if (this.fullscreenKeyHandler) {
        document.removeEventListener('keydown', this.fullscreenKeyHandler)
      }
    },

    toggleFullscreen() {
      if (this.isFullscreen()) {
        this.exitFullscreen()
      } else {
        this.enterFullscreen()
      }
    },

    enterFullscreen() {
      const element = document.documentElement
      if (element.requestFullscreen) {
        element.requestFullscreen()
      } else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen()
      } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen()
      }
    },

    exitFullscreen() {
      if (document.exitFullscreen) {
        document.exitFullscreen()
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen()
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen()
      }
    },

    isFullscreen() {
      return !!(
        document.fullscreenElement ||
        document.webkitFullscreenElement ||
        document.msFullscreenElement
      )
    },

    // 处理文件上传成功事件
    handleUploadSuccess(files) {
      console.log('文件上传成功:', files)
      // 这里不再手动更新，由分析完成事件触发
    },

    // 处理分析完成事件
    handleAnalysisComplete(analysisData) {
      console.log('分析完成:', analysisData)

      // 设置分析完成触发器，这会传递给DetentionDataCards组件
      this.analysisCompleteTrigger = analysisData

      // 动画完成后重置状态
      setTimeout(() => {
        this.analysisCompleteTrigger = null
      }, 100)
    },

    // 处理注销
    handleLogout() {
      // 清除定时器
      if (this.updateTimer) {
        clearInterval(this.updateTimer)
      }

      // 销毁图表
      this.destroyCharts()

      // 调用store的logout action
      this.$store.dispatch('user/logout')

      // 跳转到登录页面
      this.$router.push('/login')

      // 显示提示消息
      this.$message.success('已成功注销')
    }
  }
}
</script>

<style scoped>
.smart-detention-system {
  height: 100vh;
  color: white;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  /* 藏青蓝色主题背景 */
  background:
    linear-gradient(rgba(0, 100, 150, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 100, 150, 0.05) 1px, transparent 1px),
    radial-gradient(ellipse at 20% 20%, rgba(0, 80, 120, 0.15) 0%, transparent 40%),
    radial-gradient(ellipse at 80% 80%, rgba(0, 60, 100, 0.15) 0%, transparent 40%),
    radial-gradient(ellipse at 40% 60%, rgba(0, 100, 140, 0.1) 0%, transparent 40%),
    radial-gradient(circle at 60% 30%, rgba(0, 70, 110, 0.08) 0%, transparent 50%),
    linear-gradient(135deg, #0a0a1a 0%, #0f1419 30%, #0a0f14 70%, #05080a 100%);
  background-attachment: fixed;
  background-size: 50px 50px, 50px 50px, auto, auto, auto, auto, auto;
  position: relative;
  perspective: 1000px;
  animation: globalPulse 8s ease-in-out infinite;
}

@keyframes globalPulse {

  0%,
  100% {
    filter: brightness(1) contrast(1) saturate(1);
  }

  50% {
    filter: brightness(1.05) contrast(1.02) saturate(1.05);
  }
}

.system-content {
  height: 100%;
  padding: 50px 20px 20px 20px;
}

.system-content-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* 顶部统计面板 */
.top-stats-panel {
  flex-shrink: 0;
  /* margin-bottom: 15px; */
}

.center-bottom-panel {
  /* height: 100%; */
  display: flex;
  flex: 1;
  flex-shrink: 0;
  overflow: hidden;
  gap: 15px;

}
.center-bottom-panel-content{
  height: 100%;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 15px;
}
.center-bottom-panel-content.left-content {
  flex: 2;
}

.center-bottom-panel-content.right-content {
  flex: 1;
}

.center-bottom-panel-content-item{
  flex: 1;
  height: 50%;
}

.center-bottom-panel-content-item.upload-content {
  flex: 1;
}

.center-bottom-panel-content-item.log-content {
  flex: 2;
  overflow: hidden;
}

.center-bottom-panel-content-item.prison-data-content {

  flex: 3;
  flex-shrink: 0;
}


.stats-container {

  display: flex;
  gap: 20px;
}

.stats-grid {
  padding: 15px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
}

.stat-item {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px;
  background:
    linear-gradient(145deg,
      rgba(0, 80, 120, 0.12) 0%,
      rgba(0, 100, 140, 0.08) 50%,
      rgba(0, 60, 100, 0.05) 100%),
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.08) 0%, transparent 70%),
    rgba(0, 0, 0, 0.5);
  border-radius: 16px;
  border: 2px solid rgba(0, 100, 150, 0.4);
  backdrop-filter: blur(15px);
  box-shadow:
    0 8px 30px rgba(0, 100, 150, 0.25),
    inset 0 2px 0 rgba(255, 255, 255, 0.15),
    inset 0 -2px 0 rgba(0, 0, 0, 0.1);
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.stat-item:hover {
  transform: translateY(-4px) scale(1.02);
  border-color: rgba(0, 100, 150, 0.6);
  box-shadow:
    0 15px 50px rgba(0, 100, 150, 0.35),
    inset 0 2px 0 rgba(255, 255, 255, 0.25),
    inset 0 -2px 0 rgba(0, 0, 0, 0.2);
}


.stat-content {
  flex: 1;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #00ffff;
  margin-bottom: 4px;
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}

.stat-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* 主要内容区域 */
.main-content {
  height: 100%;
  flex: 1;
  display: flex;
  gap: 20px;

}

.left-panel,
.center-panel,
.right-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 0;
}

.left-panel-content,
.right-panel-content {
  height: 50%;
}

.left-panel {
  flex: 1;
}

.center-panel {
  height: 100%;
  flex: 3;
}

.right-panel {
  flex: 1;
}

/* 面板样式 */
.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.panel-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #00ffff;
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}

.decision-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #00ff88;
}

.status-dot.idle {
  background: #666;
}

.status-dot.normal {
  background: #ffa500;
}

.status-dot.busy {
  background: #ff4444;
}

/* 分流决策内容 */
.decision-content {
  height: 100%;
  overflow-y: auto;
}

.decision-item {
  display: flex;
  align-items: center;
  padding: 15px;
  margin-bottom: 10px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  border: 1px solid rgba(0, 100, 150, 0.3);
  transition: all 0.3s ease;
}

.decision-item:hover {
  background: rgba(0, 100, 150, 0.1);
  border-color: rgba(0, 100, 150, 0.5);
}

.decision-info {
  flex: 2;
}

.prisoner-name {
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  margin-bottom: 4px;
}

.prisoner-id {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 2px;
}

.crime-type {
  font-size: 14px;
  color: #ffa500;
}

.decision-result {
  flex: 2;
  text-align: center;
}

.recommendation {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 4px;
  padding: 4px 8px;
  border-radius: 4px;
}

.recommendation.low {
  background: rgba(0, 255, 136, 0.2);
  color: #00ff88;
  border: 1px solid rgba(0, 255, 136, 0.5);
}

.recommendation.medium {
  background: rgba(255, 165, 0, 0.2);
  color: #ffa500;
  border: 1px solid rgba(255, 165, 0, 0.5);
}

.recommendation.high {
  background: rgba(255, 68, 68, 0.2);
  color: #ff4444;
  border: 1px solid rgba(255, 68, 68, 0.5);
}

.confidence {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
}

.decision-actions {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.action-btn {
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.action-btn.confirm {
  background: rgba(0, 255, 136, 0.2);
  color: #00ff88;
  border: 1px solid rgba(0, 255, 136, 0.5);
}

.action-btn.confirm:hover {
  background: rgba(0, 255, 136, 0.3);
}

.action-btn.review {
  background: rgba(255, 165, 0, 0.2);
  color: #ffa500;
  border: 1px solid rgba(255, 165, 0, 0.5);
}

.action-btn.review:hover {
  background: rgba(255, 165, 0, 0.3);
}

/* 监控面板 */
.realtime-monitor {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.monitor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.monitor-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #00ffff;
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}

.control-btn {
  padding: 8px 16px;
  background: rgba(0, 100, 150, 0.2);
  color: #00ffff;
  border: 1px solid rgba(0, 100, 150, 0.5);
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;
}

.control-btn:hover {
  background: rgba(0, 100, 150, 0.3);
  border-color: rgba(0, 100, 150, 0.7);
}

.monitor-content {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  flex: 1;
}

.monitor-item {
  padding: 15px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  border: 1px solid rgba(0, 100, 150, 0.3);
  text-align: center;
}

.monitor-label {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 8px;
}

.monitor-value {
  font-size: 24px;
  font-weight: bold;
  color: #00ffff;
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}

/* 图表样式 */
.distribution-chart,
.trend-analysis {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.chart-header {
  margin-bottom: 20px;
}

.chart-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #00ffff;
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}

.chart-container,
.chart-area {
  flex: 1;
  min-height: 200px;
}

/* 风险分析 */
.analysis-content {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.analysis-header h3 {
  margin: 0 0 20px 0;
  font-size: 18px;
  font-weight: 600;
  color: #00ffff;
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}

.risk-analysis {
  flex: 1;
  overflow-y: auto;
}

.risk-item {
  display: flex;
  align-items: center;
  padding: 15px;
  margin-bottom: 10px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  border: 1px solid rgba(0, 100, 150, 0.3);
}

.risk-level {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: 15px;
  font-weight: bold;
}

.risk-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.risk-level.high .risk-dot {
  background: #ff4444;
}

.risk-level.medium .risk-dot {
  background: #ffa500;
}

.risk-level.low .risk-dot {
  background: #00ff88;
}

.risk-content {
  flex: 1;
}

.risk-type {
  font-size: 16px;
  color: #fff;
  margin-bottom: 4px;
}

.risk-count {
  font-size: 14px;
  color: #00ffff;
  margin-bottom: 4px;
}

.risk-trend {
  font-size: 12px;
  font-weight: bold;
}

.risk-trend.up {
  color: #ff4444;
}

.risk-trend.down {
  color: #00ff88;
}

.risk-trend.stable {
  color: #ffa500;
}

/* 底部趋势分析 */
.bottom-panel {
  flex-shrink: 0;
  margin-top: 25px;
}

.trend-analysis {
  height: 400px;
  display: flex;
  flex-direction: column;
}

.trend-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.trend-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #00ffff;
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}

.time-selector {
  display: flex;
  gap: 10px;
}

.time-btn {
  padding: 6px 12px;
  background: rgba(0, 100, 150, 0.2);
  color: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(0, 100, 150, 0.3);
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;
}

.time-btn:hover,
.time-btn.active {
  background: rgba(0, 100, 150, 0.4);
  color: #00ffff;
  border-color: rgba(0, 100, 150, 0.6);
}

.trend-charts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  flex: 1;
}

.trend-chart {
  display: flex;
  flex-direction: column;
}

/* 浮动注销按钮样式 */
.floating-logout {
  position: fixed;
  top: 35px;
  right: 25px;
  z-index: 1000;
}

.logout-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  background:
    linear-gradient(145deg,
      rgba(220, 20, 60, 0.9) 0%,
      rgba(139, 0, 0, 0.8) 50%,
      rgba(178, 34, 52, 0.7) 100%
    ),
    rgba(0, 0, 0, 0.8);
  border: 2px solid rgba(220, 20, 60, 0.6);
  border-radius: 12px;
  color: #ffcccc;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  backdrop-filter: blur(10px);
  box-shadow:
    0 8px 25px rgba(220, 20, 60, 0.4),
    inset 0 2px 0 rgba(255, 255, 255, 0.2),
    inset 0 -2px 0 rgba(0, 0, 0, 0.3);
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.logout-btn:hover {
  transform: translateY(-2px) scale(1.05);
  border-color: rgba(220, 20, 60, 0.8);
  box-shadow:
    0 12px 35px rgba(220, 20, 60, 0.5),
    inset 0 2px 0 rgba(255, 255, 255, 0.3),
    inset 0 -2px 0 rgba(0, 0, 0, 0.4),
    0 0 30px rgba(220, 20, 60, 0.3);
}

.logout-icon {
  font-size: 18px;
  filter: drop-shadow(0 0 5px rgba(255, 204, 204, 0.5));
}

.logout-text {
  text-shadow: 0 0 8px rgba(255, 204, 204, 0.4);
}
</style>
